<template>
    <div class="right_content">
        <el-form :inline="true" size="small" :model="formInline">
            <el-form-item label="作业名称">
                <el-input v-model="formInline.workName" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="提交人">
                <el-input v-model="formInline.userName" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="formInline.state" placeholder="请选择" clearable style="width: 100px;">
                    <el-option label="待完成" value="0" />
                    <el-option label="已完成" value="1" />
                    <el-option label="过期未完成" value="2" />
                </el-select>
            </el-form-item>
            <el-form-item label="作业类型">
                <el-select v-model="formInline.type" placeholder="请选择" clearable style="width: 100px;">
                    <el-option label="题库自选题" value="0" />
                    <el-option label="自定义" value="1" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>

        </el-form>

        <!-- 表格 -->
        <el-table ref="singleTableRef" tooltip-effect="dark" :data="tableData" highlight-current-row border stripe
            align="center" size="small" style="width: 100%">
            <el-table-column type="index" label="序号" align="center" width="80" />
            <el-table-column property="workName" label="作业名称" align="center" />
            <el-table-column property="userName" label="提交人" align="center" width="100" />
            <el-table-column property="submissionTime" label="提交时间" width="180" align="center">
                <template v-slot="{ row }">
                    <div class="content">
                        {{ formatData(row.submissionTime) }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column property="score" label="成绩" align="center" width="120" />
            <el-table-column property="deadlineTime" label="截止时间" align="center" width="180">
                <template v-slot="{ row }">
                    <div class="content">
                        {{ formatData(row.deadlineTime) }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column property="state" label="状态" align="center" width="120">
                <template v-slot="{ row }">
                    <div class="content" style="color: #409EFF;" v-if="row.state == 0">待完成</div>
                    <div class="content" style="color: rgb(46 210 55);" v-else-if="row.state == 1">已完成</div>
                    <div class="content" style="color: red;" v-else-if="row.state == 2">过期未完成</div>
                </template>
            </el-table-column>
            <el-table-column property="type" label="类型" align="center" width="120">
                <template v-slot="{ row }">
                    <div class="content" style="color: #409EFF;" v-if="row.type == 0">题库自选题</div>
                    <div class="content" style="color: rgb(192 108 18);" v-else-if="row.type == 1">自定义</div>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="200">
                <template #default="{ row }">
                    <el-button type="primary" size="small" v-if="row.type == 0"
                        @click="PreviewHomework(row.workId, row.workRecordId)">预览</el-button>
                    <el-button type="success" size="small" v-if="row.type == 1" :disabled="row.score != null"
                        @click="CustomCorrection(row.workRecordId, row.answerUrl)">批改</el-button>
                    <el-button type="danger" size="small" @click="redoHomework(row.workRecordId)">重做</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="page">
            <Pagination @getDate="getTeacherHomeworkList" :queryNum="queryCount" />
        </div>
        <CustomCorrectionDia v-model:show="show" @onSubmit="onSubmit" :iframeUrl="iframeUrl"
            :workRecordId="workRecordId" />
    </div>
</template>

<script setup>
import { ref, reactive } from "vue"
const props = defineProps(['courseId'])
import { useRouter } from "vue-router";
const router = useRouter();

import CustomCorrectionDia from '@/views/teacher/mycourse/dialog/CustomCorrectionDia'

import { getTeacherHomeworkListApi, redoHomeworkApi } from "@/api/index";
import { ElMessage, } from "element-plus";
import Pagination from "@/components/base/MyPagination.vue";
import useUserInfo from "store/useUserInfo.js";
const useUserInfoStore = useUserInfo();
import { storeToRefs } from 'pinia'
const { userInfo } = storeToRefs(useUserInfoStore)

const formInline = reactive({
    state: '',
    type: '',
    workName: '',
    userName: '',
})
// 分页用
const queryCount = ref(1);
const tableData = ref([
])
const loading = ref(false);

const onSubmit = () => {
    queryCount.value += 1;
}
// 获取作业列表
const getTeacherHomeworkList = async (page) => {
    loading.value = true
    const params = {
        pageNum: page.pageNum,
        pageSize: page.pageSize,
        operatorId: userInfo.value.userId,
        courseId: props.courseId
    }
    for (const key in formInline) {
        if (formInline[key] != null && formInline[key] !== "" && key !== "time") {
            params[key] = formInline[key];
        } else if (formInline.time && formInline.time.length !== 0) {
            params.startTime = formInline.time[0];
            params.endTime = formInline.time[1];
        }
    }
    const res = await getTeacherHomeworkListApi(params)
    loading.value = false;
    if (res.code !== "10000") {
        ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
        });
        return;
    }
    ElMessage({
        showClose: true,
        message: `查询成功!`,
        type: "success",
    });
    tableData.value = res.data.list || [];
    page.totalCount = res.data.totalCount;
}
// 格式化时间
const formatData = (cellValue) => {
    var s = new Date(cellValue).toLocaleString();
    return s;
};
// 预览作业
const PreviewHomework = (id, wid) => {
    router.push({
        name: "PreviewHomework", params: {
            id,
            wid,
            type: 2
        }
    });
}
const iframeUrl = ref('')
const show = ref(false);
// 批改作业
const workRecordId = ref(null)
const CustomCorrection = (workRecordid, answerUrl) => {
    iframeUrl.value = answerUrl;
    workRecordId.value = workRecordid;
    show.value = true
}
// 重做作业

const redoHomework = async (workRecordId) => {
    const res = await redoHomeworkApi(
        workRecordId,
    )
    if (res.code !== "10000") {
        ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
        });
        return;
    }
    ElMessage({
        showClose: true,
        message: `已发起重做!`,
        type: "success",
    });
    onSubmit()
}
</script>

<style lang="scss" scoped></style>